<template>
  <div class="forum-container">
    <!-- 我的版块 -->
    <el-collapse v-model="activePanels" accordion>
      <el-collapse-item title="我的版块" name="my-boards">
        <div v-for="board in myBoards" :key="board.id" class="board-item">
          <div class="board-info">
            <h3>{{ board.name }}</h3>
            <p>{{ board.description }}</p>
          </div>
          <div class="board-stats">
            <span>成员: {{ board.member_count }}</span>
          </div>
        </div>
      </el-collapse-item>

      <!-- 全部版块 -->
      <el-collapse-item title="全部版块" name="all-boards">
        <div v-for="board in allBoards" :key="board.id" class="board-item">
          <div class="board-info">
            <h3>{{ board.name }}</h3>
            <p>{{ board.description }}</p>
          </div>
          <div class="board-stats">
            <span>成员: {{ board.member_count }}</span>
          </div>
        </div>
      </el-collapse-item>
      </el-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import http from '@/utils/http'

interface Board {
  id: number
  name: string
  description: string
  topic_count: number
  member_count: number
}

const activePanels = ref(['my-boards'])
const myBoards = ref<Board[]>([])
const allBoards = ref<Board[]>([])
const systemBoards = ref<Board[]>([])

// 获取版块数据
const fetchBoards = async () => {
  try {
    // 这里替换为实际的API端点
    const res = await http.get('/forum/boards/')
    // 根据实际数据结构调整
    myBoards.value = res.data.my_boards || []
    allBoards.value = res.data.all_boards || []
    systemBoards.value = res.data.system_boards || []
  } catch (error) {
    console.error('获取版块列表失败:', error)
  }
}

// 初始化时获取数据
fetchBoards()
</script>

<style scoped>
.forum-container {
  position: absolute;
  top: 60px;
  left: 0;
  width: 1200px; /* 使用视窗宽度 */
  padding: 20px;
}

.board-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #f9f9f9;
  border-radius: 4px;
  transition: all 0.3s;
  width: 100%; /* 确保宽度填满 */
}

.board-item:hover {
  background: #f0f0f0;
  transform: translateX(4px);
}

.board-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.board-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.board-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.board-stats span {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}
</style>